<template>
    <div class="dp-dialog" v-if="$attrs.visible"  v-bind="$attrs">
        <div style="z-index: 9999; " class="dvBox">
           <div class="title"> <p class="">{{ $attrs.title }}</p> <i @click="handleClickClose()" class="el-icon-close" style="margin-right: 6px;"></i></div>
           <div class="content">
            <el-scrollbar style="height:100%">
                        <ul class="left-ul">
                            <li>预警类型：{{ listData.alarmName }}</li>
                            <li>预警地点：{{ listData.alarmAddress}}</li>
                            <li>预警行为：{{ listData.alarmContent }}</li>
                            <li>预警时间：{{ listData.alarmTime | type_time}}</li>
                            <li class="warning-image" v-if="listData.playUrl">预警视频：<EasyPlayer  :url="listData.playUrl" style="width: 400px;height: 250px;margin-top: 6px;" ></EasyPlayer></li>
                       </ul>
                    </el-scrollbar> 
            <!-- <el-tabs tab-position="left" class="my-tabs">
                <el-tab-pane v-for="(item,index) in listData" :key="index" :label="item.alarmName">
                    <el-scrollbar style="height:100%">
                        <ul class="left-ul">
                            <li>预警类型：{{ item.alarmName }}</li>
                            <li>预警地点：{{ item.alarmAddress}}</li>
                            <li>预警行为：{{ item.alarmContent }}</li>
                            <li>预警时间：{{ item.alarmTime | type_time}}</li>
                            <li class="warning-image" v-if="item.playUrl">预警视频：<EasyPlayer  :url="item.playUrl" style="width: 400px;height: 250px;margin-top: 6px;" ></EasyPlayer></li>
                       </ul>
                    </el-scrollbar> 
                </el-tab-pane>
            </el-tabs> -->
           </div>
        </div>
    </div>
    </template>
    
    <script>
    import EasyPlayer from "@/views/witness/components/Object3D/easyPlayer.vue"
    export default {
        filters:{
            type_time(val){
                let str = val
                if(typeof val === 'number'){
                    str = new Date(val).toLocaleString()
                }
                return str
            }
        },
        components:{
            EasyPlayer
        },
        data(){
            return {
                listData:{},
            }
        },
        methods:{
            handleClickClose(){
                this.$emit('update:visible',false)
            },
            setAlarmMsgList(data){
                this.listData = []
                this.listData = data
            }
        },
        mounted(){
            
        }
    }
    </script>
    
    <style lang="scss" scoped>
    .dp-dialog{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        overflow: hidden;
        color: #fff;
        box-sizing: border-box;
    
        ul,li{
            list-style: none;
            margin: 0;
            padding: 0;
        }
    }
    .dvBox{
        width: 800px;
        padding-bottom: 20px;
        margin: 0 auto;
        margin-top: 300px;
        background-color: #032089de;
        .title{
            border-bottom: 2px solid #1890ff;
            color: #fff;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;;
            p{
                margin: 0;
                line-height: 40px;
                padding-left: 10px;
            }
        }
        .content{
            ::v-deep  .my-tabs{
                height: 558px;
               .el-tabs__item{
                    color: #fff;
                    &.is-active{
                        color: #cb30f2;
                    }
                }
                .el-tabs__content{
                    // padding: 0;
                }
                .el-tabs__nav-wrap::after{
                //   position: static !important;
                   background: rgb(67, 103, 201);
                }
                .el-tab-pane{
                    padding: 10px;
                    padding-right: 0px;
                }

          
            }
            padding-left: 10px;
            .left-ul{
                padding-top:10px;
                padding-bottom: 10px;
                font-size: 14px;
            }
            .warning-image{
                display: flex;
                align-items: flex-start
            }
       
        }
      
      
    }

    ::v-deep .dv-border-svg-container{
        background-color: rgb(18, 55, 156);
    }


    ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
        padding-right: 10px;
    }
    </style>